<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页 -Mock在线平台</title>
<link rel="icon" href="static/images/favicon.ico" type="image/ico">
<meta name="keywords" content="Mock在线平台">
<meta name="description" content="Mock在线平台">
<meta name="author" content="yinqi">
<link href="static/css/bootstrap.min.css"  th:href="@{/system/static/css/bootstrap.min.css}"  rel="stylesheet">
<link href="static/css/materialdesignicons.min.css" th:href="@{/system/static/css/materialdesignicons.min.css}" rel="stylesheet">
<link href="static/css/style.min.css" th:href="@{/system/static/css/style.min.css}" rel="stylesheet">
<script type="text/javascript" src="static/js/mock/login.js" th:href="@{/system/static/js/mock/login.js}"></script>
<script type="text/javascript" src="static/echarts/echarts.min.js" th:href="@{/system/static/echarts/echarts.min.js}"></script>
<!--日期选择插件-->
<link rel="stylesheet" href="static/js/daterangepicker/daterangepicker.css" th:href="@{/system/static/js/daterangepicker/daterangepicker.css}">

</head>
  
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
      
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="index.html"><img src="static/images/mock.png" title="LightYear" alt="LightYear" /></a>
      </div>
      <div class="lyear-layout-sidebar-scroll"> 
        
        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
            <li class="nav-item active"> <a href="index.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-palette"></i>Mock配置</a>
              <ul class="nav nav-subnav">
                <li> <a href="url/mockList">mock列表</a> </li> 
                <li> <a href="url/mockLog">mock请求日志</a> </li>               
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-settings"></i>基础管理</a>
              <ul class="nav nav-subnav">
                <li> <a href="user/userList">用户管理</a> </li> 
                <li> <a href="category/categoryList">模块管理</a> </li>               
              </ul>
            </li>             
          </ul>
        </nav>
        
      </div>
      
    </aside>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <header class="lyear-layout-header">
      
      <nav class="navbar navbar-default">
        <div class="topbar">
          
          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 后台首页 </span>
          </div>
          
          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
              	<input id="userType" type="hidden" th:value="${session.userType}" /> 
              	<input id="userId" type="hidden" th:value="${session.userId}" />             		
                <span style="font-size:18px" th:text="${session.userName}"></span>
                <span class="caret"></span>   
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li> <a  data-toggle="modal" data-target="#personalModal"  onclick="editPer();"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                <li> <a data-toggle="modal" data-target="#editPassWdModal" data-whatever="@mdo"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                <li  class="divider"></li>
                <li > 
                	<a  onclick="Loginout()" ><i class="mdi mdi-logout-variant"></i>退出登录</a>
                </li>              
               </ul>
            </li>
          </ul>
          
        </div>
      </nav>
      
    </header>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">        
        <div class="row">
						<div class="panel-body height-400 main-font">
							<p>接口一览是主要配置模块，使用系统可以遵循以下的步骤。ps: 以下文字中，中括号【】为强调，配置时请忽略。</p>
							<ol>
								<li>在接口一览中，点击【添加】新建一个需要模拟的URL，如果有path传参，请一定用<span style="color:Red;">【{path}】</span>进行占位，"/test/{path}"请求过程中{path}可以为任意数字。如：<span style="color:Red;">/test/6</span>
								</li>
								<li>URL路径 为系统指定唯一请求路径<span style="color:Red;">【不可重复】</span></li>
								<li>配置了url为<span style="color:Red;">【/test】接口</span>, 那么请求<span style="color:Red;">http://ip:port/Mock/test</span> 即可请求成功。</li>
								<li>一个接口请求可配置多个响应，响应规则匹配为<span style="color:Red;">【完全匹配】</span>，匹配【URL】、【请求方式】、【请求参数】，<span style="color:Red;">【参数顺序和值】</span>也不能变更 例如参数配置：{"userName":"张三","passWD":"123456"}，不能{"passWD":"123456","userName":"张三"}</li>
								<li><span style="color:Red;">get请求带参数</span>，例如：/Mock/info?phone=123&type=1，【body】选项为【formData】添加"phone"和"type"2个参数和值</li>
<!-- 								<li>【body】选项为【formData】会默认添加【header】Content-Type为application/x-www-form-urlencoded</br>【body】选项为【json】会默认添加【header】Content-Type为application/json</li>								 -->
								<li>请求成功后，系统会记录日志，请求失败返回【未找到对应Mock配置，请检查请求】</li>
								<li>密码重置后新密码为<span style="color:Red;">【123456】</span></li>
								<li>【用户列表】的权限只提供给<span style="color:Red;">【管理员】</span>操作</li>
							</ol>
						</div>
					</div>
        
        <div class="row">
          
          <div class="col-lg-6"> 
            <div class="card">
              <div class="card-header">
                	<h4>接口请求统计</h4>
					<span class="input-group-addon" id="basic-addon">日期范围</span>
                	<div class="col-sm-4 input-group" id="date-picker">
					    <input type = "text" id="date-range" class="form-control">
					    <i id="calendar-icon" class="fa fa-calendar"></i>
					</div>	
              </div>
              <div class="card-body"  id="chart1" style="width: 800px;height:450px;">              
			  </div>                
              
            </div>
          </div>
          
          <div class="col-lg-6"> 
            <div class="card">
              <div class="card-header">
                	<h4>每日请求统计</h4>
					<span class="input-group-addon" id="basic-addon">日期范围</span>
                	<div class="col-sm-4 input-group" id="date-picker">
					    <input type = "text" id="date-range1" class="form-control">					    
					    <i id="calendar-icon" class="fa fa-calendar"></i>					   
					</div>	
              </div>
              <div class="card-body" id="chart2" style="width: 800px;height:450px;">
              </div>              
            </div>
          </div>
           
        </div>       
        
      </div>
      
		<footer class="home-footer">
		    <div style="text-align:center">
		      <span class="copy"  style="color:red;">2020 &copy; Luojuwang</span>
		    </div>
		</footer>
    </main>
       
    <div class="modal fade" id="personalModal" tabindex="-1" role="dialog" aria-labelledby="personalModalLabel">
	    <div class="modal-dialog" role="document">
	        <form class="form-horizontal" action="#" method="post" onsubmit="return false;">
	            <div class="modal-content">
	                <!-- 弹出框的头部 -->
	                <div class="modal-header">
	                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                        <span aria-hidden="true"> &times; </span>
	                    </button>
	                    <h4 class="modal-title" id="editUserModalLabel">个人信息</h4>
	                </div>
	                <!-- 弹出框的内容 -->
	                <div class="modal-body">
	                    <input class="form-control" type="hidden" id="hf-per-userId" name="hf-userId" value="">
	                    <div class="form-group">
	                        <label class="col-md-2 control-label" for="hf-per-loginName">登陆名称</label>
	                        <div class="col-md-9">
	                            <input class="form-control" type="text" id="hf-per-loginName" name="hf-per-loginName" value="" readonly="readonly">
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-2 control-label" for="hf-per-userName">用户名称</label>
	                        <div class="col-md-9">
	                            <input class="form-control" type="text" id="hf-per-userName" name="hf-per-userName" value="" placeholder="请输入...">
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-2 control-label" for="hf-per-email">邮箱</label>
	                        <div class="col-md-9">
	                            <input class="form-control" type="text" id="hf-per-email" name="hf-per-email" value="" placeholder="请输入...">
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-2 control-label" for="hf-per-phone">手机</label>
	                        <div class="col-md-9">
	                            <input class="form-control"  id="hf-per-phone" name="hf-per-phone"   placeholder="请输入..."/>	                            
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-2 control-label" for="hf-per-sex">性别</label>
	                        <div class="col-md-9">
								<label class="radio-inline" for="example-inline-radio">
			                        <input type="radio" id="hf-per-sex-radio" name="hf-per-sex-radio" value="0">
			                        	男
			                     </label>
			                     <label class="radio-inline" for="example-inline-radio">
			                       <input type="radio" id="hf-per-sex-radio" name="hf-per-sex-radio" value="1">
			                        	女
			                     </label>
                        	</div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-2 control-label" for="hf-per-remark">备注</label>
	                        <div class="col-md-9">
	                            <textarea class="form-control"  maxlength="255" id="hf-per-remark"  name="hf-per-remark" style="height: 150px;resize: none;" placeholder="请输入...">
	                            </textarea>
	                        </div>
	                    </div>
	                </div>
	                <!-- 弹出框的底部 -->
	                <div class="modal-footer">
	                    <div style="text-align:center">
	                        <!-- 设置了data-dismiss="modal"属性，就可以关闭该弹出框 -->
	                        <button type="button" class="btn btn-primary" onclick="editPersonalAction()"> 保存</button>
	                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                    </div>
	                </div>
	            </div>
	        </form>
	    </div>
	</div>
    <div class="modal fade" id="editPassWdModal" tabindex="-1" role="dialog" aria-labelledby="editPassWdModalLabel">
	    <div class="modal-dialog" role="document">
	        <form class="form-horizontal" action="#" method="post" onsubmit="return false;">
	            <div class="modal-content">
	                <!-- 弹出框的内容 -->
	                <div class="modal-body">
	                    <div class="form-group">
	                        <label class="col-md-2 control-label" for="hf-old-pwd">旧密码</label>
	                        <div class="col-md-9">
	                            <input class="form-control" type="text" id="hf-old-pwd" name="hf-old-pwd" value="" placeholder="请输入...">
	                        </div>
	                    </div>
						<div class="form-group">
	                        <label class="col-md-2 control-label" for="hf-new-pwd">新密码</label>
	                        <div class="col-md-9">
	                            <input class="form-control" type="text" id="hf-new-pwd" name="hf-new-pwd" value="" placeholder="请输入...">
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-2 control-label" for="hf-confirm-pwd">确认密码</label>
	                        <div class="col-md-9">
	                            <input class="form-control" type="text" id="hf-confirm-pwd" name="hf-confirm-pwd" value="" placeholder="请输入...">
	                        </div>
	                    </div>

	                <!-- 弹出框的底部 -->
	                <div class="modal-footer">
	                    <div style="text-align:center">
	                        <!-- 设置了data-dismiss="modal"属性，就可以关闭该弹出框 -->
	                        <button type="button" class="btn btn-primary" onclick="editPWD()"> 保存</button>
	                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                    </div>
	                </div>
	            </div>
	           </div>
	        </form>
	    </div>
	</div>
    <!--End 页面主要内容-->

  </div>
</div>

<script type="text/javascript" src="static/js/jquery.min.js" th:href="@{/system/static/js/jquery.min.js}"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js" th:href="@{/system/static/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="static/js/perfect-scrollbar.min.js" th:href="@{/system/static/js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" src="static/js/main.min.js" th:href="@{/system/static/js/main.min.js}"></script>
<script type="text/javascript" src="static/js/mock/person.js" th:href="@{/system/static/js/mock/person.js}"></script>
<!--日期选择插件-->
<script src="static/js/daterangepicker/moment.min.js" th:href="@{/system/static/js/daterangepicker/moment.min.js}"></script>
<script src="static/js/daterangepicker/daterangepicker.js" th:href="@{/system/static/js/daterangepicker/daterangepicker.js}"></script>
<script src="static/js/daterangepicker/daterang.js" th:href="@{/system/static/js/daterangepicker/daterang.js}"></script>
<script src="static/js/mock/echart.js" th:href="@{/system/static/js/mock/echart.js}"></script>
<script src="static/js/mock/date-zh-CN.js" th:href="@{/system/static/js/mock/date-zh-CN.js}"></script>

<script type="text/javascript">
var beginDate=Date.today().add(-7).days().toString("yyyy-M-d");
var endDate=Date.today().toString("yyyy-M-d");

$(window).load( function(){
	$("#date-range").val(beginDate+' 至 '+endDate)
	$("#date-range1").val(beginDate+' 至 '+endDate)
	countByDate(beginDate,endDate)
	countByName(beginDate,endDate)
} );
</script>

</body>
</html>